iT邦幫忙

2024 iThome 鐵人賽

DAY 14
0
自我挑戰組

JavaScript DOM 操作系列 第 14

DAY 14: 動態綁定與移除事件

  • 分享至 

  • xImage
  •  

今天學到了動態綁定與移除事件,這讓我感覺能更靈活地控制頁面上的互動,尤其是在需要動態添加或刪除功能時,非常實用。

  1. 綁定事件範例

https://ithelp.ithome.com.tw/upload/images/20240928/20169384IYBPsWxQzl.png

在這裡,我用 addEventListener 動態綁定了一個點擊事件到按鈕上。當用戶點擊該按鈕時,會觸發 showAlert 函數,彈出提示框。

  1. 移除事件範例

https://ithelp.ithome.com.tw/upload/images/20240928/20169384qujBFxdEHU.png

之後,如果我想移除該事件,可以用 removeEventListener。這樣一來,按鈕被點擊時就不會再彈出提示框了。

結果:
點擊綁定事件後,會出現提示訊息。
移除事件後,點擊按鈕則不會再有反應。

  1. 補充範例:用於綁定多個不同事件

https://ithelp.ithome.com.tw/upload/images/20240928/20169384YQIGxvSocU.png

這裡展示了如何同時綁定多個事件,例如滑鼠移到按鈕上改變顏色,點擊按鈕則彈出提示。這讓我理解到,透過動態操作事件處理器,我能夠讓網頁更加互動且具有彈性。


上一篇
DAY 13: 事件傳遞與捕獲
下一篇
DAY 15: 事件委派
系列文
JavaScript DOM 操作30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言